<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>个人博客</title>
    <link rel="stylesheet" href="../static/css/blogIndex.css">
    <script src="../static/js/jquery-3.2.1.min.js" type="text/javascript"></script>
    <script src="../static/js/common.js" type="text/javascript"></script>
	<script type="text/javascript">
//     $('#personalBlogPage').addClass('currentMenu');
	$(function() { 
		var id = location.search.substr(4);//获取上一个页面传递过来的参数 ID
		$("#div-input").val(id);
		var url = "http://localhost:8080/blog/getBlogById/"+id;
		ajaxAction(url);
	});
	 function ajaxAction(action){
		  $.ajax({
            type : "get",
            url : action,
            data :{},//设置数据源
            dataType : "json",//设置需要返回的数据类型
			success : function(result) {
				var blog=result.blog;
				//加载博客
				$("#blog-div001").append("<h3 style='text-align: center'>"
					+blog.title+"</h3><ul class='blogArticle_baseInfo'><li>"
					+"发布时间：<span>"
					+formatDate(blog.createTime)+"</span></li><li>"
					+"浏览量：<span>"
					+blog.read+"</span></li><li>"
					+"作者：<span>"
					+blog.writer+"</span></li></ul><div style='min-height: 200px;margin-top: 20px;margin-bottom: 60px;'>"
					+blog.note+"</div>");
            	//加载评论
            	var commentList = result.comment;
            	for (var i = 0; i < commentList.length; i++) {
            		var comment = commentList[i];
            		if(comment.commentAdmire==0){
            			comment.commentAdmire="  ";
            		}
	            	$("#div_ui_comment").append("<li><img src='../pic/head.jpg' alt='' class='user_pic'><div class='message_main_content'><p><span class='user_name'>"
	                +comment.commentName+"</span><span class='public_time'>"
	                +formatDate(comment.commentTime)+"</span></p><p>"
	                +comment.commentNote+"</p><div class='message_op'><a href='javascript:void(0)' class='iconfont praise'>&#xe626;"
	                +"</a><a href='javascript:void(0)' class='reply_message'>回复  "+comment.commentAdmire+"</a> </div></div></li>");
                }
			}
            	
		  })
		}
    
	function onNotNull(index){
            if(index==1){
                $("#baidu").submit();
            }else if(index==2){
                $("#csdn").submit();
            }
        }
	
	function dianZan(admire){
// 		var value = $("a[name='dianZan']");
// 		var value2 = parsInt(admire)+1;
// 		value.val(value2);
		var s =$("#dianZan"+admire).val();
		alert(s);
		$("a[name='dianZan']").val(parsInt(admire)+1);
// 		$("input[name='username']").val()+1s
	}
	
	function tijiao(){
		var comment = $("#comment-textarea").val().replace(/\s+/g,"");	//匿名评论内容
		if (comment!="") {
		var id = $("#div-input").val();//博客id
		 $.ajax({
	            type : "post",
	            url : "http://localhost:8080/blog/addCommentNote",
	            data :{"id":id,"comment":comment},//设置数据源
	            dataType : "json",//设置需要返回的数据类型
				success : function(result) {
					$("#div_ui_comment").append("<li><img src='../pic/head.jpg' alt='' class='user_pic'><div class='message_main_content'><p><span class='user_name'>"
			                +result.commen.commentName+"</span><span class='public_time'>"
			                +formatDate(result.commen.commentTime)+"</span></p><p>"
			                +result.commen.commentNote+"</p><div class='message_op'><a href='javascript:void(0)' class='iconfont praise'>&#xe626;"
			                +"</a><a href='javascript:void(0)' class='reply_message'>回复  "+result.commen.commentAdmire+"</a> </div></div></li>");
				} })
				//清空评论区数据
				$("#comment-textarea").val("");
		}else{
			alert("小伙子，不厚道哦！");
		}
	}
	
	
    </script>
</head>
<body>
<!-- 头部页面 -->
<jsp:include page="top.jsp" />
<!-- 内容显示区 -->
<div class="main_section">
    <div class="left_section clearfix">
        <div class="left_content" >
        	<div id = "blog-div001">
        	<input id = "div-input" type="hidden" />
        	<!-- 动态显示博客内容
        	
 				后期需优化为固定模版，套数据       	
        	 -->
            </div>
            <!--评论区--->
            <div>
                <div style="position: relative">
                    <a href="javascript:void(0)" class="publicBlog_loginBtn">登陆</a>
                    <div class="public_message">
                        <textarea name="" id="comment-textarea" cols="30" rows="4" placeholder="说两句吧..."></textarea>
                    </div>
                    <a href="javascript:void(0)" class="subMessageBtn" onclick="tijiao();">留言</a>
                    <div class="clearfix"></div>
                </div>
                <div>
                    <ul class="message_list" id="div_ui_comment">
                        <!-- 评论区 -->
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="right_section">
        <div class="card_section">
            <h2 class="small_card_title">搜索</h2>
            <div class="small_card_content">
                <div style='overflow:hidden'><!-- 百度搜索 -->
                    <form  id = 'baidu' action="http://www.baidu.com/baidu" target="_blank" class="search_form">
                        <input id ="baiduseach" class='search_text' type="text" name="word"  size="30" placeholder="请输入搜索内容" >
                        <input class='search_btn' type="button" value="百度"  onclick="onNotNull('1');">
                    </form>
                    <form  id = 'csdn' action="http://so.csdn.net/so/search/s.do" target="_blank" class="search_form" >
                        <input id ="csdnseach" class='search_text' type="text" name="q"  size="30" placeholder="请输入搜索内容" >
                        <input class='search_btn search_CSDN' type="button" value="CSDN" onclick="onNotNull('2');" >
                    </form>
                </div>
            </div>
        </div>
        <div class="card_section">
            <h2 class="small_card_title">推荐内容</h2>
            <div class="small_card_content">
                <ul>
                    <li class="recommend_article">
                        <a href="javascript:void(0)">十条设计原则教你学会如何设计网页布局...</a>
                        <p>网页常见的布局有很多种,单列布局,多列布局.其中单列布局是国外很多网站比较常用的.咱们很多站长以及门户...</p>
                    </li>
                    <li class="recommend_article">
                        <a href="javascript:void(0)">十条设计原则教你学会如何设计网页布局...</a>
                        <p>网页常见的布局有很多种,单列布局,多列布局.其中单列布局是国外很多网站比较常用的.咱们很多站长以及门户...</p>
                    </li>
                    <li class="recommend_article">
                        <a href="javascript:void(0)">十条设计原则教你学会如何设计网页布局...</a>
                        <p>网页常见的布局有很多种,单列布局,多列布局.其中单列布局是国外很多网站比较常用的.咱们很多站长以及门户...</p>
                    </li>
                    <li class="recommend_article">
                        <a href="javascript:void(0)">十条设计原则教你学会如何设计网页布局...</a>
                        <p>网页常见的布局有很多种,单列布局,多列布局.其中单列布局是国外很多网站比较常用的.咱们很多站长以及门户...</p>
                    </li>
                    <li class="recommend_article">
                        <a href="javascript:void(0)">十条设计原则教你学会如何设计网页布局...</a>
                        <p>网页常见的布局有很多种,单列布局,多列布局.其中单列布局是国外很多网站比较常用的.咱们很多站长以及门户...</p>
                    </li>
                    <li class="recommend_article">
                        <a href="javascript:void(0)">十条设计原则教你学会如何设计网页布局...</a>
                        <p>网页常见的布局有很多种,单列布局,多列布局.其中单列布局是国外很多网站比较常用的.咱们很多站长以及门户...</p>
                    </li>
                    <li class="recommend_article">
                        <a href="javascript:void(0)">十条设计原则教你学会如何设计网页布局...</a>
                        <p>网页常见的布局有很多种,单列布局,多列布局.其中单列布局是国外很多网站比较常用的.咱们很多站长以及门户...</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

</body>
</html>